// 群聊

let groupWebSocket = null; // ✅ 改为 let，才能后续重新赋值

//获取当前用户已加入的群聊并渲染到列表中：
// 群聊初始化函数，由 client.js 调用
function initGroup() {
    const userId = document.querySelector('.main .left .user').getAttribute('user-id');
    if (!userId) {
        console.warn("initGroup 中 user-id 未获取到，取消初始化");
        return;
    }

    // 获取用户已加入的群聊
    $.ajax({
        type: 'GET',
        url: `/group/list?userId=${userId}`,
        success: function(groups) {
            for (let group of groups) {
                let li = document.createElement('li');
                li.setAttribute('group-id', group.groupId);
                li.innerHTML = `
                    <div class="group-header">
                        <h4>${group.groupName}</h4>
                        <p class="join-tip">点击加入</p>
                        <span class="delete-group">❌</span>
                    </div>
                `;


                // 点击 li 进入群聊
                li.onclick = function (e) {
                    // 避免点击删除按钮触发 li 的 enter 行为
                    if (e.target.classList.contains('delete-group')) return;
                    enterGroupChatView(group.groupId);
                };

                // 点击删除按钮
                li.querySelector('.delete-group').onclick = function (e) {
                    e.stopPropagation(); // 防止事件冒泡触发 li 的点击事件
                    const confirmDelete = confirm(`确定要删除群聊 "${group.groupName}" 吗？`);
                    if (confirmDelete) {
                        deleteGroup(group.groupId, li);
                    }
                };

                document.getElementById('group-chat-list').appendChild(li);
            }

        },
        error: function () {
            console.log("获取群聊列表失败");
        }
    });
}




document.getElementById('create-group-chat').onclick = function() {
    const groupName = prompt('请输入群聊名称:');
    const userId = document.querySelector('.main .left .user').getAttribute('user-id');
    if (!groupName || !userId) return;

    // 获取所有好友列表中的 friendId
    const friendCheckboxes = Array.from(document.querySelectorAll('#friend-list li')).map(li => {
        const friendId = li.getAttribute('friend-id');
        const friendName = li.querySelector('h4').innerText.trim();
        return { friendId, friendName };
    });


    // 弹出复选框选择好友（简单实现）
    let selectedIds = prompt(
        '请输入要加入群聊的好友ID（用英文逗号分隔）:\n' +
        friendCheckboxes.map(f => `${f.friendId}: ${f.friendName}`).join('\n')
    );
    if (!selectedIds) return;
    const memberIds = selectedIds.split(',').map(s => parseInt(s.trim())).filter(id => !isNaN(id));

    // 加上自己
    memberIds.push(parseInt(userId));
    const senderId =userId;
    $.ajax({
        type: 'POST',
        url: '/group/create',
        contentType: 'application/json',
        data: JSON.stringify({ groupName, senderId, memberIds }),
        success: function(response) {
            if (response.success) {
                const groupId = response.groupId;

                // 创建新的 li
                let li = document.createElement('li');
                li.setAttribute('group-id', groupId);
                li.innerHTML = `
                        <div class="group-header">
                        <h4>${groupName}</h4>
                        <p class="join-tip">点击加入</p>
                        <span class="delete-group">❌</span>
                    </div>
                `;


                // 添加点击事件：进入群聊
                li.onclick = function (e) {
                    if (e.target.classList.contains('delete-group')) return;
                    enterGroupChatView(groupId);
                };

                // 删除按钮点击事件
                li.querySelector('.delete-group').onclick = function (e) {
                    e.stopPropagation();
                    const confirmDelete = confirm(`确定要删除群聊 "${groupName}" 吗？`);
                    if (confirmDelete) {
                        deleteGroup(groupId, li);
                    }
                };

                // 添加到列表中
                document.getElementById('group-chat-list').appendChild(li);

                // 记录已加入群聊
                joinedGroups.add(groupId);

                // 自动进入该群聊
                enterGroupChatView(groupId);
            } else {
                alert('创建群聊失败！');
            }
        },
        error: function() {
            alert("请求失败！");
        }
    });
};
// 删除群聊
function deleteGroup(groupId, liElement) {
    const userId = document.querySelector('.main .left .user').getAttribute('user-id');
    $.ajax({
        type: 'POST',
        url: '/group/delete',
        contentType: 'application/json',
        data: JSON.stringify({ groupId: groupId, userId: userId }),
        success: function(response) {
            if (response.success) {
                alert("用户已退出群聊");
                liElement.remove(); // 从页面中移除
            } else {
                alert("用户退出失败：" + response.message);
            }
        },
        error: function() {
            alert("退出群聊请求失败！");
        }
    });
}

// 加入群聊
function joinGroupChat(groupId, userId) {
    if (joinedGroups.has(groupId)) {
        // 已经加入，直接进入界面
        enterGroupChatView(groupId);
        return;
    }
    $.ajax({
        type: 'POST',
        url: '/group/join',
        contentType: 'application/json',
        data: JSON.stringify({
            groupId: groupId,
            senderId: userId
        }),
        success: function(response) {
            if(response.code != 500){
                alert("已加入群聊: " + response);
            }else{
                alert("加入群聊失败！");
            }
            // 加入成功后可切换 UI，比如展示聊天区域等
        },
        error: function() {
            alert("加入群聊失败！");
        }
    });
}


// 接受群聊消息



// 展示群聊消息
function displayGroupMessage(message) {
    let groupMessageContainer = document.querySelector('.right .message-show');
    let groupMessageDiv = document.createElement('div');
    groupMessageDiv.classList.add('message');
    groupMessageDiv.innerHTML = `<div class="box">
        <h4>${message.fromName}</h4>
        <p>${message.messageContent}</p>
    </div>`;
    groupMessageContainer.appendChild(groupMessageDiv);
    scrollBottom(groupMessageContainer);
}

// 发送群聊消息
function sendGroupMessage(groupId, messageContent) {
    const senderId = document.querySelector('.main .left .user').getAttribute('user-id');
    if (groupWebSocket.readyState !== WebSocket.OPEN) {
        console.error("群聊 WebSocket 未连接成功，不能发送消息！");
        alert("群聊连接未就绪，请稍后重试。");
        return;
    }

    let message = {
        type: 'groupMessage',
        groupId: groupId,
        senderId: parseInt(senderId),
        messageContent: messageContent
    };
    groupWebSocket.send(JSON.stringify(message));
}


function enterGroupChatView(groupId) {
    if (groupWebSocket && groupWebSocket.readyState === WebSocket.OPEN) {
        groupWebSocket.close();
    }

    groupWebSocket = new WebSocket(`ws://${location.host}/GroupWebsocketMessage?groupId=${groupId}`);

    groupWebSocket.onopen = () => {
        console.log("群聊 websocket 连接成功！");
    };

    groupWebSocket.onmessage = (e) => {
        let resp = JSON.parse(e.data);
        if (resp.type === 'groupMessage') {
            displayGroupMessage(resp);
        }
    };

    groupWebSocket.onerror = () => {
        console.error("群聊 websocket 连接异常！");
    };
    const titleDiv = document.querySelector('.right .title');
    const messageContainer = document.querySelector('.right .message-show');
    const messageInput = document.querySelector('.right .message-input');
    const sendButton = document.querySelector('.right .ctrl button');

    // 1. 获取群聊名称（从群聊列表 li 标签中）
    const groupLi = document.querySelector(`li[group-id='${groupId}']`);
    const groupName = groupLi ? groupLi.querySelector('h4').innerText : '群聊';


    // 2. 设置聊天标题
    // 清空旧标题内容
    titleDiv.innerHTML = '';

// 创建标题文本
    const titleText = document.createElement('span');
    titleText.innerText = `[群聊] ${groupName}`;
    titleText.style.flex = '1';

    // 创建退出按钮
        const exitButton = document.createElement('button');
        exitButton.innerText = '退出群聊';
        exitButton.style.marginLeft = '10px';
        exitButton.style.padding = '4px 8px';
        exitButton.style.fontSize = '14px';
        exitButton.style.backgroundColor = '#f44336';
        exitButton.style.color = 'white';
        exitButton.style.border = 'none';
        exitButton.style.borderRadius = '4px';
        exitButton.style.cursor = 'pointer';

    // 绑定退出事件
        exitButton.onclick = function () {
            const confirmExit = confirm(`确定要退出群聊 "${groupName}" 吗？`);
            if (confirmExit) {
                const groupLi = document.querySelector(`li[group-id='${groupId}']`);
                deleteGroup(groupId, groupLi);

                // 清空右侧聊天区域
                messageContainer.innerHTML = '';
                titleDiv.innerText = '请选择一个会话或群聊';
            }
        };

// 将内容添加到标题栏
    titleDiv.style.display = 'flex';
    titleDiv.style.alignItems = 'center';
    titleDiv.appendChild(titleText);
    titleDiv.appendChild(exitButton);
    // -----------------------------------------------------------------------

    // 3. 清空旧消息
    messageContainer.innerHTML = '';

    // 4. 加载群聊历史消息（假设后端有 GET /group/messages?groupId=xxx）
    $.ajax({
        type: 'GET',
        url: `/group/messages?groupId=${groupId}`,
        success: function(messages) {
            for (let msg of messages) {
                displayGroupMessage(msg);
            }
            scrollBottom(messageContainer);
        },
        error: function() {
            console.log("加载群聊历史消息失败");
        }
    });

    // 5. 绑定发送按钮点击事件（覆盖私聊发送）
    sendButton.onclick = function () {
        const content = messageInput.value;
        if (!content) return;
        sendGroupMessage(groupId, content);
        messageInput.value = '';
    };
}
